import React from "react";
import { useAppDispatch, useAppSelector } from "@/hooks/useRedux";
import { setTheme, THEMES } from "@/store/themeSlice";
import "./ThemeSwitcher.less";
import { Button } from "antd";
const ThemeSwitcher: React.FC = () => {
  // 从Redux获取当前主题
  const currentTheme1 = useAppSelector((state) => state.theme.currentTheme);
  const dispatch = useAppDispatch();
  return (
    <div className="theme-switcher">
      <span className="theme-label">主题:</span>
      <div className="theme-buttons">
        {THEMES.map((theme) => (
          <Button
            key={theme}
            className={`theme-btn ${currentTheme1 === theme ? "active" : ""}`}
            onClick={() => dispatch(setTheme(theme))}
            aria-label={`切换到${theme}主题`}
          >
            {theme} {currentTheme1}
          </Button>
        ))}
      </div>
    </div>
  );
};

export default ThemeSwitcher;
